<script setup>
import {nextTick, onMounted, reactive, ref} from "vue";
import Table from '@/components/admin/Table.vue'
import Dialog from '@/components/admin/EditDialog.vue'
import inlineDialog from '@/components/admin/inlineDialog.vue';
import {Delete, Download, Plus, ZoomIn, Search} from '@element-plus/icons-vue'
import {
  GetAllCustomLoginMessageService,
  ChangeStatus
} from '@/api/customloginmessage.js'
import {ElMessage} from "element-plus";
import AvatarIcon from '@/assets/images/avatar.png'
// 搜索查询
const columns = [
  {
    name: 'username',
    label: '账号名',
    search: true,
    valueType: 'input',
    span: 8,
    attrs: {
      placeholder: '请输入',
    },
  },
  {
    name: 'mobile',
    label: '手机号',
    search: true,
    valueType: 'input',
    span: 8,
    attrs: {
      placeholder: '请输入',
    },
  },
  {
    name: 'status',
    label: '状态',
    slot: true,
    search: true,
    span: 8,
    attrs: {
      placeholder: '请输入',
    },
    options: [
      {
        value: 1,
        label: '正常',
      },
      {
        value: 2,
        label: '封号',
      },
    ],
    valueType: 'select',
  },
]
let baseColumns = reactive(columns)

// 表格相关参数
const customMsg = ref({
  columns: [
    {
      label: '账号名',
      prop: 'username',
      width: '140',
    },
    {
      label: '头像',
      prop: 'avatar',
      width: '200',
      type: 'pic'
    },
    {
      label: '状态',
      prop: 'status',
      width: '150',
      type: 'switch',
      formatter: (row) => {
        switch (row.status) {
          case '1': {
            return '正常'
          }
          case '2': {
            return '封号'
          }
        }
      }
    },
    {
      label: '手机号',
      prop: 'mobile',
      width: '200',
    },
    {
      label: '账号建立时间',
      prop: 'created_time',
      width: '200',
    },
    {
      label: '性别',
      prop: 'gender',
      width: '200',
      formatter: (row) => {
        switch (row.gender) {
          case '1': {
            return '男性'
          }
          case '2': {
            return '女性'
          }
        }
      }
    },
    {
      label: '详细描述',
      prop: 'description',
      width: '450'
    }
  ],
  data: [],
})
const loading = ref()
// 展示数据
const getList = (keyword) => {
  GetAllCustomLoginMessageService(all.page, all.limit, keyword)
      .then((res) => {
        customMsg.value.data = res.data.results.data
        // 获取数据总数
        all.total = res.data.count
        loading.value = false
        // console.log(res.data.results.data)
      })
      .catch((err) => {
        console.log(err)
      })
}
onMounted(() => {
  getList()
})
// 分页
const all = reactive({
  // 总数
  total: 0,
  // 页
  page: 1,
  // 条
  limit: 10,
})
const sizeChange = (val) => {
  all.limit = val;
  getList()
};
/**
 * 页
 * val -- 当前条
 */
const currentChange = (val) => {
  all.page = val;
  getList()
};

// 查询
const onSubmit = (val) => {
  console.log(val)
  loading.value = true
  setTimeout(() => {
    getList(val)
    loading.value = false
  }, 1000)
}
// 改变账号的状态
const changeStatus = async (value) => {
  const username = value.username
  const status = value.status
  console.log(username, status)
  loading.value = true
  setTimeout(() => {
        if (value.username) {
          ChangeStatus(username, status).then((res) => {
            console.log(res)
            loading.value = false
          })
              .catch((err) => {
                console.log(err)
              })
        }
      }
      , 2000)
}
// 绑定表格的内容(选项selection)
const multipleTableRef = ref()
// 单个删除组件
const handleDelete = (row) => {
  const params = row.id;
  console.log(params)
  deleteSellNoticeUrlService(params).then((res) => {
    console.log(res.data);
    getList()

  });
}
// 批量选择并删除
const multipleSelection = ref([]);
const selectionchange = (val) => {
  multipleSelection.value = val
  console.log(multipleSelection.value)
}
// 批量选择并删除
const handleDeleteArray = () => {
  if (multipleSelection.value.length <= 0) {
    ElMessage.warning('麻烦你选中了再点')
  }
  for (var i = 0; i < multipleSelection.value.length; i++) {
    const params = multipleSelection.value[i].id;
    const Ids = []
    Ids.push(...multipleSelection.value.map(row => row.id))
    console.log(Ids);
    deleteSellNoticeUrlsService({Ids: Ids})
        .then((res) => {
          multipleSelection.value = []
          console.log(res.data);
          getList()
        });
  }
}

</script>
<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <inlineDialog @submit="onSubmit" :columns="baseColumns"/>
      </div>
    </template>
    <div class="operbutton">
      <el-button type="danger" @click="handleDeleteArray">批量删除</el-button>
    </div>
    <Table
        ref="multipleTableRef"
        :customdata="customMsg"
        :all="all"
        @handleSizeChange="sizeChange"
        @handleCurrentChange="currentChange"
        @handleSelectionChange="selectionchange"
    >
      <template #status="{row}">
        <el-switch
            v-model="row.status"
            inline-prompt
            active-text="封号"
            inactive-text="正常"
            active-value="2"
            inactive-value="1"
            @change="changeStatus(row)"
            v-loading="loading"
        />
      </template>
      <template #avatar="{row}">
        <div>
          <el-image
              v-if="row.avatar"
              fit="cover"
              :src="row.avatar"
              :preview-src-list="[row.avatar]"
              style="width: 120px; height: 120px"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :initial-index="4"
              preview-teleported="true"
          />
          <el-image
              v-else
              fit="cover"
              :src="AvatarIcon"
              :preview-src-list="[AvatarIcon]"
              style="width: 120px; height: 120px"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :initial-index="4"
              preview-teleported="true"
          />
        </div>
      </template>
      <template #operate>
        <el-table-column label="操作" fixed="right" width="100" show-overflow-tooltip>
          <template #default="scope">
            <el-popconfirm title="是否确定要删除吗" confirm-button-text="是" cancel-button-text="否"
                           @confirm="handleDelete(scope.row)">
              <template #reference>
                <el-button
                    size="small"
                    type="danger"
                >删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </template>
    </Table>
  </el-card>
</template>

<style scoped>

.operbutton {
  margin-bottom: 30px;
}
</style>